<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "favorite-item",
});
</script>
<script setup lang="ts">
import { reactive, ref, withDefaults, toRefs } from "vue";
import { Router } from "@/utils/router";
import ImageItem from "@/components/image/image-item.vue";
import { Account } from "@/utils/account";
type dataType = {
  data: any;
  type: number;
};
const props = withDefaults(defineProps<dataType>(), {
  data: {},
  type: 1,
});
const toProduct = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/famous-talk/pages/detail/index?id=${props.data.id}`
    );
  });
};
const toArticle = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/novice/pages/note/detail?id=${props.data.id}`
    );
  });
};
const toNote = (type: number) => {
  if (type === 2) {
    Account.checkLogin((isLogin) => {
      Router.navigateToOrRedirectTo(
        isLogin,
        `/package/novice/pages/note/detail2?id=${props.data.id}`
      );
    });
  } else {
    Account.checkLogin((isLogin) => {
      Router.navigateToOrRedirectTo(
        isLogin,
        `/package/novice/pages/note/detail?id=${props.data.id}`
      );
    });
  }
};
const toGuider = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/famous-talk/pages/detail/index?id=${props.data.id}`
    );
  });
};
</script>

<template>
  <view class="favoriteWrap" v-if="type === 1" @click="toProduct">
    <view class="imageWrap">
      <ImageItem
        width="144rpx"
        height="108rpx"
        :src="data.pic_url"
        borderDadius="10rpx"
      />
    </view>
    <view class="rightWrap">
      <view class="des">
        {{ data.title }}
      </view>
    </view>
  </view>
  <view class="favoriteWrap" v-if="type === 2" @click="toGuider">
    <view class="imageWrap">
      <ImageItem
        width="144rpx"
        height="108rpx"
        :src="data.pic_url"
        borderDadius="10rpx"
      />
    </view>
    <view class="rightWrap">
      <view class="des">
        {{ data.title }}
      </view>
      <view class="guider"> 名导：{{ data.guider_name }} </view>
    </view>
  </view>
  <view class="favoriteWrap" v-if="type === 3"  @click="toArticle">
    <view class="imageWrap">
      <ImageItem
        width="144rpx"
        height="108rpx"
        :src="data.pic_url"
        borderDadius="10rpx"
      />
    </view>
    <view class="rightWrap">
      <view class="des">
        {{ data.title }}
      </view>
      <view class="headWrap">
        <ImageItem
        width="34rpx"
        height="34rpx"
        :src="data.head_img"
        borderDadius="50%"
      />
      <view class="name">
        {{data.nick_name}}
      </view>
      </view>
    </view>
  </view>
  <view class="favoriteWrap" v-if="type === 4" @click="toNote(data.text_type)">
    <view class="imageWrap" v-if="data.text_type==1">
      <ImageItem
        width="144rpx"
        height="108rpx"
        :src="data.pic_url"
        borderDadius="10rpx"
      />
    </view>
      <view class="VedioWrap" v-if="data.text_type==2">
      <ImageItem
        width="144rpx"
        height="108rpx"
        :src="data.pic_url"
        borderDadius="10rpx"
      />
    </view>
    <view class="rightWrap">
      <view class="des">
        {{ data.title }}
      </view>
      <view class="headWrap">
        <ImageItem
        width="34rpx"
        height="34rpx"
        :src="data.head_img"
        borderDadius="50%"
      />
      <view class="name">
        {{data.nick_name}}
      </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
.favoriteWrap {
  margin-bottom: 20rpx;
  width: 100%;
  height: 152rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  .imageWrap {
    margin-right: 20rpx;
  }
  .VedioWrap {
    margin-right: 20rpx;
  }
  .rightWrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .des {
      @include lineLimit(2);
      font-size: 26rpx;

      color: #333333;
      line-height: 36rpx;
    }
    .guider {
      font-size: 24rpx;

      color: #ff7900;
      line-height: 34rpx;
    }
  }
}
.headWrap {
  display: flex;
  .name {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }
}
</style>
